<template>
  <div id="app">
    <!-- 使用Header组件 -->
    <HeaderComponent 
      :isLoggedIn="isLoggedIn"
      :userInfo="userInfo"
      :showUserPanel="showUserPanel"
      @open-login="$emit('open-login')"
      @toggle-user-panel="$emit('toggle-user-panel')"
      @logout="$emit('logout')"
    />
    <!-- 主布局 -->
    <div class="main-layout">
      <!-- 左侧分类栏 -->
      <aside class="sidebar-left">
        <ul class="category-list">
          <li 
            v-for="category in categories" 
            :key="category.name"
            class="category-item"
            :class="{ active: category.active }"
            @click="setCategory(category.name)"
          >
            <div v-if="category.active" class="category-dot"></div>
            <span>{{ category.icon }}</span>
            <span>{{ category.name }}</span>
          </li>
        </ul>
      </aside>

      <!-- 中间内容区 -->
      <main class="main-content">
        <div class="content-tabs">
          <div 
            class="tab"
            :class="{ active: currentTab === '推荐' }"
            @click="setTab('推荐')"
          >
            推荐
          </div>
          <div 
            class="tab"
            :class="{ active: currentTab === '最新' }"
            @click="setTab('最新')"
          >
            最新
          </div>
        </div>
        
        <div class="article-list">
          <article 
            v-for="article in articles" 
            :key="article.id"
            class="article-card"
          >
            <div class="article-content">
              <h3 class="article-title">
                <RouterLink :to="`/article/${article.id}`" class="article-link">
                  {{ article.title }}
                </RouterLink>
              </h3>
              <p class="article-description">{{ article.description }}</p>
              <div class="article-meta">
                <div class="article-author">
                  <span>{{ article.author }}</span>
                  <span>·</span>
                  <span>{{ article.views }}</span>
                  <span>·</span>
                  <span>{{ article.likes }}</span>
                </div>
                <div class="article-tags">
                  <span 
                    v-for="tag in article.tags" 
                    :key="tag"
                    class="tag"
                  >
                    {{ tag }}
                  </span>
                </div>
              </div>
            </div>
            <img :src="article.thumbnail" :alt="article.title" class="article-thumbnail">
          </article>
        </div>
      </main>

      <!-- 右侧边栏 -->
      <aside class="sidebar-right">
        <!-- 问候区域 -->
        <div class="greeting-section">
          <h2 class="greeting-title">早上好!</h2>
          <p class="greeting-subtitle">点亮在社区的每一天</p>
          <button class="btn btn-primary" @click="checkIn">去签到</button>
        </div>

        <!-- 文章榜 -->
        <div class="ranking-section">
          <div class="ranking-header">
            <h3 class="ranking-title">
              <span>📈</span>
              文章榜
            </h3>
            <span class="refresh-btn" @click="refreshRanking">🔄 换一换</span>
          </div>
          <ul class="ranking-list">
            <li 
              v-for="(article, index) in rankingArticles" 
              :key="index"
              class="ranking-item"
            >
              <span class="ranking-number">{{ index + 1 }}</span>
              <span>{{ article }}</span>
            </li>
          </ul>
          <a href="#" class="view-more">查看更多></a>
        </div>

        <!-- 作者榜 -->
        <div class="ranking-section">
          <div class="ranking-header">
            <h3 class="ranking-title">
              <span>👤</span>
              作者榜
            </h3>
          </div>
          <ul class="author-list">
            <li 
              v-for="author in authors" 
              :key="author.name"
              class="author-item"
            >
              <div class="author-avatar"></div>
              <div class="author-info">
                <div class="author-name">{{ author.name }}</div>
                <div class="author-title">{{ author.title }}</div>
              </div>
              <button 
                class="follow-btn"
                @click="followAuthor(author.name)"
              >
                +关注
              </button>
            </li>
          </ul>
        </div>
      </aside>
    </div>
  </div>
</template>

<script>
import { useJuejinStore } from '@/stores/juejin'
import { storeToRefs } from 'pinia'
import { onMounted } from 'vue'
import HeaderComponent from '@/components/HeaderComponent.vue'

export default {
  name: 'HomeView',
  components: {
    HeaderComponent
  },
  props: {
    isLoggedIn: {
      type: Boolean,
      default: false
    },
    userInfo: {
      type: Object,
      default: () => ({
        username: '',
        avatar: ''
      })
    },
    showUserPanel: {
      type: Boolean,
      default: false
    }
  },
  emits: ['open-login', 'toggle-user-panel', 'logout'],

  setup() {
    const store = useJuejinStore()
    const { 
      articles, 
      categories, 
      currentTab, 
      rankingArticles, 
      authors 
    } = storeToRefs(store)
    
    const { 
      setCategory, 
      setTab, 
      refreshRanking, 
      followAuthor, 
      checkIn 
    } = store

    // 组件挂载时获取数据
    onMounted(async () => {
      await store.fetchCategories()
      await store.fetchArticles()
    })

    return {
      articles,
      categories,
      currentTab,
      rankingArticles,
      authors,
      setCategory,
      setTab,
      refreshRanking,
      followAuthor,
      checkIn
    }
  }
}
</script>

<style scoped>
/* HomeView 特有样式 */
.article-link {
  color: inherit;
  text-decoration: none;
  display: block;
  transition: color 0.2s ease;
}

.article-link:hover {
  color: #007fff;
}

.article-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
</style>
